<template>
  <main>
    <div class="main">
      <div class="section-content">
        <!-- <div class="search-input-wrapper">
          <a-input-search
            placeholder="请输入关键字"
            :allowClear="true"
            v-model="searchKeywords"
            @focus="inputSearchOnFocus"
            @change="inputSearchChange"
            @blur="inputSearchOnBlur"
            @pressEnter="searchPressEnter"
          />
        </div> -->

        <div>
          <menu-bar-pc :selectedIndex.sync="selectedIndex" :items="categories" :itemClick="menuItemClick"></menu-bar-pc>
        </div>

        <div class="collection">
          <div class="container">
            <div class="cell" v-for="(item, index) in items" :key="index" @click="itemClick(item)">
              <a-image :src="item.cover" />
              <v-clamp class="cell-headline" autoresize :max-lines="2">{{ item.name }}</v-clamp>
            </div>
          </div>
        </div>

        <a-pagination
          background
          layout="prev, pager, next"
          :current="currentPage"
          :page-size="pageSize"
          :total="totalCount"
          @change="paginationOnChange"
        >
        </a-pagination>
      </div>
    </div>
  </main>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'List',
  data() {
    return {
      selectedIndex: 0,
      searchKeywords: '',
      isSearchInputing: false,
    }
  },
  components: {},

  computed: {
    ...mapState('forumsExpertWorks', {
      items: (state) => state.items,
      pageSize: (state) => state.pageSize,
      pageTotal: (state) => state.pageTotal,
      totalCount: (state) => state.totalCount,
      currentPage: (state) => state.currentPage,
      originalPage: (state) => state.originalPage,
    }),
    ...mapState('forums', {
      categories: (state) => state.categories,
    }),
  },

  created() {
    const that = this

    const query = this.$route.query
    console.log('\n\n query = ' + JSON.stringify(query) + '\n\n')
    this.expertId = query.expertId

    this.getForumsCategoryListAction({ pageNo: 1, pageSize: 99 })
      .then(() => {
        that.updateList()
      })
      .catch((error) => {
        that.$message.error(error.message)
      })
  },

  methods: {
    ...mapActions('forums', ['getForumsCategoryListAction']),
    ...mapActions('forumsExpertWorks', [
      'getForumsExpertWorksListAction',
      'updateCurrentPageAction',
      'updateOriginalPageAction',
    ]),
    ...mapActions('banner', ['getForumsExpertWorksBannerListAction']),

    itemClick(item) {
      this.$router.push({
        path: '/forums/expert/works/detail',
        query: { id: item.id },
      })
    },

    menuItemClick(item, index) {
      this.selectedIndex = index
      this.updateCurrentPageAction(1)

      this.updateList()
    },

    /**
     * @description: 输入框编辑聚焦(开始编辑)
     * @param {*}
     * @return {*}
     */
    inputSearchOnFocus() {
      if (!this.searchKeywords) {
        this.updateOriginalPageAction(this.currentPage)
      }
      this.updateCurrentPageAction(1)
      this.isSearchInputing = true
    },

    /**
     * @description: 输入文本变化监听，可以用于Autocomplete的实现
     * @param {*}
     * @return {*}
     */
    inputSearchChange() {
      if (this.isSearchInputing == false) {
        if (!this.searchKeywords) {
          this.updateCurrentPageAction(this.originalPage)
          this.updateList()
        }
      }
    },

    /**
     * @description:输入框失去编辑聚焦
     * @param {*}
     * @return {*}
     */
    inputSearchOnBlur() {
      this.isSearchInputing = false
      this.updateList()
    },

    /**
     * @description: 键盘enter事件监听
     * @param {*}
     * @return {*}
     */
    searchPressEnter() {
      // console.log('\n\n searchPressEnter this.originalPage = ' + JSON.stringify(this.originalPage) + '\n\n')
      const isRefresh = true
      this.updateList(isRefresh)
    },

    paginationOnChange(value) {
      // console.log('\n\n  = ' + 'paginationOnChange' + '\n\n')
      this.updateCurrentPageAction(value)
      this.updateList()
    },

    updateList() {
      const that = this
      const item = this.categories[this.selectedIndex]
      var categoryId = null
      if (item) {
        categoryId = item.id
      }
      const parameters = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        // categoryId: this.searchKeywords ? null : categoryId,
        forumsExpertId: this.expertId,
        forumsCategoryId: categoryId,
        name: this.searchKeywords,
      }
      const isRefresh = true
      const isPC = true
      this.getForumsExpertWorksListAction({ isRefresh, parameters, isPC }).catch((error) => {
        that.$message.error(error.message)
      })
    },
  },
}
</script>

<style scoped lang="less"></style>

